<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="layout-padding-auto layout-padding-view">
				<el-row v-show="showSearch">
					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
						<el-form-item label="名称：">
							<el-input v-model="state.queryForm.rateName" placeholder="请输入名称" />
						</el-form-item>
						<el-form-item label="能源分类：">
							<el-select v-model="state.queryForm.energyType" placeholder="请选择能源分类">
								<el-option v-for="item in energy_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="费率类型：">
							<el-select v-model="state.queryForm.rateType" placeholder="请选择费率类型">
								<el-option v-for="item in rate_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :icon="Search" @click="getDataList">查询</el-button>
							<el-button :icon="Refresh" @click="reset">重置</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row>
					<div class="mb8" style="width: 100%">
						<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="add">
							{{ $t('common.addBtn') }}
						</el-button>
						<right-toolbar
							v-model:showSearch="showSearch"
							:export="'exsecs_energyRateManage_add'"
							@exportExcel="exportExcel"
							@queryTable="getDataList"
							class="ml10 mr20"
							style="float: right"
						/>
					</div>
				</el-row>
				<el-table
					v-loading="state.loading"
					:data="state.dataList"
					row-key="userId"
					border
					:cell-style="tableStyle.cellStyle"
					:header-cell-style="tableStyle.headerCellStyle"
				>
					<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
					<el-table-column prop="rateName" label="名称" />
					<el-table-column prop="energyType" label="能源分类">
						<template #default="scope">
							{{ energy_type.find((item) => item.value === scope.row.energyType)?.label }}
						</template>
					</el-table-column>
					<el-table-column prop="rateType" label="费率类型">
						<template #default="scope">
							{{ rate_type.find((item) => item.value === scope.row.rateType)?.label }}
						</template>
					</el-table-column>
					<el-table-column prop="units" label="单位" />
					<el-table-column prop="rateStartTime" label="费率有效期开始" />
					<el-table-column prop="rateEndTime" label="费率有效期结束" />
					<el-table-column fixed="right" label="操作" width="180">
						<template #default="scope">
							<el-button type="primary" @click="edit(scope.row)" :icon="Edit" link>修改</el-button>
							<el-button type="danger" @click="del(scope.row.rateId)" :icon="Delete" link>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
			</div>
			<el-dialog v-model="dialogVisible" width="70%" draggable>
				<template #header>
					<div class="dialog-title">{{ dialogTitle }}</div>
				</template>
				<el-form :model="form" label-width="180px" class="formClass">
					<el-row>
						<el-col :span="8">
							<el-form-item label="名称：">
								<el-input v-model="form.rateName" placeholder="请输入名称"></el-input>
							</el-form-item>
							<el-form-item label="能源分类：">
								<el-select v-model="form.energyType">
									<el-option v-for="item in energy_type" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item v-model="form.rateType" label="费率类型：">
								<el-select v-model="form.rateType">
									<el-option v-for="item in rate_type" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="单位：">
								<el-input placeholder="请输入单位" v-model="form.units"></el-input>
							</el-form-item>
							<el-form-item label="费率有效期开始：">
								<el-date-picker
									v-model="form.rateStartTime"
									value-format="YYYY-MM-DD HH:mm:ss"
									type="datetime"
									placeholder="请选择"
									style="width: 100%"
								/>
							</el-form-item>
							<el-form-item label="费率有效期结束：">
								<el-date-picker
									v-model="form.rateEndTime"
									value-format="YYYY-MM-DD HH:mm:ss"
									type="datetime"
									placeholder="请选择"
									style="width: 100%"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="1" style="display: flex; justify-content: center; align-items: center">
							<el-divider direction="vertical" style="height: 95%" />
						</el-col>
						<el-col :span="15">
							<el-row style="margin-bottom: 15px">
								<el-col :span="5" style="display: flex; justify-content: center">开始时间</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">结束时间</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">尖峰平谷</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">价格</el-col>
								<el-col :span="4" style="display: flex; justify-content: center">操作</el-col>
							</el-row>
							<el-row v-for="(item, i) in form.flowList" :key="i" style="margin-bottom: 15px">
								<el-col :span="5" style="display: flex; justify-content: center">
									<el-time-select
										v-model="item.rateStartTime"
										style="width: 80%"
										:min-time="item.rateEndTime"
										placeholder="请选择"
										start="00:00"
										step="00:60"
										end="24:00"
										format="HH:mm:ss"
									/>
								</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">
									<el-time-select
										v-model="item.rateEndTime"
										style="width: 80%"
										:min-time="item.rateStartTime"
										placeholder="请选择"
										start="00:00"
										step="00:60"
										end="24:00"
										format="HH:mm:ss"
									/>
								</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">
									<el-select v-model="item.rateType" placeholder="请选择" style="width: 80%">
										<el-option v-for="item in pfv_type" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</el-col>
								<el-col :span="5" style="display: flex; justify-content: center">
									<el-input-number v-model="item.price" placeholder="请输入" style="width: 80%"></el-input-number>
								</el-col>
								<el-col :span="4" style="display: flex; justify-content: center">
									<el-button type="primary" @click="addRateFlow" :icon="Plus" round></el-button>
									<el-button type="danger" @click="deleteRate" :icon="Delete" round></el-button>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="save">保存</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { FolderAdd, UploadFilled, Edit, Delete, Search, Refresh, Plus } from '@element-plus/icons-vue';
import { getRateList, editRate, delRate, addRate } from '/@/api/consumptionmanagement/basicconfig/rate';
import { useDict } from '/@/hooks/dict';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ref, reactive } from 'vue';
import moment from 'moment';

const queryRef = ref();
const showSearch = ref(true);
// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		rateName: '',
		energyType: '',
		rateType: '',
	},
	pageList: getRateList,
});
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

const tableData = ref([]);
const { pfv_type, rate_type, energy_type } = useDict('pfv_type', 'rate_type', 'energy_type');

const form = ref({
	rateName: '',
	energyType: '',
	rateType: '',
	units: '',
	rateStartTime: '',
	rateEndTime: '',
	flowList: [
		{
			rateStartTime: '',
			rateEndTime: '',
			rateType: '',
			price: '',
		},
	],
});
const dialogTitle = ref('添加费率');
const dialogVisible = ref(false);
// 导出excel
const exportExcel = () => {
	downBlobFile('/admin/energyRateManage/export', Object.assign(state.queryForm), '费率配置记录.xlsx');
};
const add = () => {
	dialogVisible.value = true;
	dialogTitle.value = '添加费率';
	form.value = {
		rateName: '',
		energyType: '',
		rateType: '',
		units: '',
		rateStartTime: '',
		rateEndTime: '',
		flowList: [
			{
				rateStartTime: '',
				rateEndTime: '',
				rateType: '',
				price: '',
			},
		],
	};
};
const edit = (obj) => {
	dialogVisible.value = true;
	dialogTitle.value = '编辑费率';
	form.value = obj;
};
const addRateFlow = () => {
	form.value.flowList.push({
		rateStartTime: '',
		rateEndTime: '',
		rateType: '',
		price: '',
	});
};
const deleteRate = (item, i) => {
	form.value.flowList.splice(i, 1);
};
const save = () => {
	addRate(form.value).then((res) => {
		if (res) {
			useMessage().success('保存成功');
			dialogVisible.value = false;
			getDataList();
		}
	});
};
const del = (id) => {
	useMessageBox()
		.confirm('是否确认删除此数据?')
		.then(function () {
			return delRate(id);
		})
		.then((data) => {
			useMessage().success('删除成功');
			getDataList();
		})
		.catch((cancelorerror) => {});
};
// 清空搜索条件
const reset = () => {
	state.queryForm = {
		rateName: '',
		energyType: '',
		rateType: '',
	};
	getDataList();
};
</script>
<style lang="scss" scoped>
.formClass {
	:deep(.el-form-item--default) {
		margin-top: 40px;
		margin-bottom: 0px;
	}
}

.text-title {
	position: relative;
	height: 36px;
	line-height: 36px;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
	&:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 16px;
		background-color: #409eff;
		top: 10px;
		left: 0;
	}
}
.dialog-title {
	display: flex;
	justify-content: center;
	font-size: 20px;
}
</style>
